import { defineComponent, ref, Teleport, watch } from "vue";
import styles from "./PlanEdit.module.less";
import _ from "lodash";
import LIcon from "@/components/public/lIcon/lIcon";
import { BellFilled, QuestionCircleOutlined } from "@ant-design/icons-vue";
import dayjs from 'dayjs';
export default defineComponent({
  emits: ['confirm'],
  setup(props: any, { expose, emit }) {
    const state_default = {
      isShow: false,
      start_date: '',
      end_date: '',
      count: 1,
      tour_route: '',
      tour_group_no: '',
    }
    const state = ref(_.cloneDeep(state_default));
    const open = (e: any) => {
      state.value.start_date = e?.start_date || '';
      state.value.end_date = e?.end_date || '';
      state.value.count = e?.count || '';
      state.value.tour_route = e?.tour_route || '';
      state.value.tour_group_no = e?.tour_group_no || '';
      state.value.isShow = true;
    }
    const closed = () => {
      state.value = _.cloneDeep(state_default);
    }
    watch(() => state.value.isShow, (nv) => {
      if (!nv) {
        closed();
      }
    })
    expose({
      open,
    })

    const count_check = async (_rule: any, value: string) => {
      if (value === '') {
        return Promise.reject('请选择保险份数!');
      }
    }

    const tour_route_check = async (_rule: any, value: string) => {
      if (value === '') {
        return Promise.reject('请输入旅游路线!');
      }
    }

    const tour_group_no_check = async (_rule: any, value: string) => {
      if (value === '') {
        return Promise.reject('请输入旅游团编号!');
      }
    }

    const rules = {
      count: [{ required: true, validator: count_check, trigger: 'change' }],
      tour_route: [{ required: true, validator: tour_route_check, trigger: 'change' }],
      tour_group_no: [{ required: true, validator: tour_group_no_check, trigger: 'change' }],
    }

    const saveConfirm = () => {
      emit('confirm', state.value);
      state.value.isShow = false;
    }

    const disabledDate = (current: any) => {
      return current && current <= dayjs().startOf('day');
    };

    const dateStartChange = () => {
      state.value.end_date = '';
    };

    const disabledDateEnd = (current: any) => {
      return current && current < dayjs(state.value.start_date).startOf('day');
    }

    return () => (
      state.value.isShow && <div class={styles['plan-edit-floating']}>
        <div class={styles['plan-edit-card']}>
          <div class={styles['card-header']}>
            <div class={styles['title']}>保险方案</div>
            <div class={styles['delete-box']} onClick={() => { state.value.isShow = false }}>
              <LIcon type="icon-delete-x" class={styles['delete-icon']} />
            </div>
          </div>
          <div class={styles['card-container']}>
            <a-form class={styles.form} rules={rules} model={state.value} label-col={{ style: { width: '111px' } }} wrapper-col={{ span: 24 }}>
              <a-form-item label="保险起期">
                <a-date-picker valueFormat="YYYY-MM-DD" style={{ width: '210px' }} v-model:value={state.value.start_date} disabled-date={disabledDate} onChange={() => { dateStartChange() }} />
                <span style={{ margin: '0 10px' }}>至</span>
                <a-date-picker valueFormat="YYYY-MM-DD" style={{ width: '210px' }} v-model:value={state.value.end_date} disabled-date={disabledDateEnd} />
                <a-popover placement="top" color="#fff5ec" v-slots={{
                  content: () => (
                    <>
                      <span class={styles['date-tips-popover']}>所有当日投保、当日起保的保单（即保险期间开始于投保日当日的保单）<br />航班延误保险责任或旅程延误保险责任的保险责任起期为保险单载明的保险期间的开始时间的次日零时。</span>
                    </>
                  )
                }}>
                  <QuestionCircleOutlined class={styles['date-tips-icon']} />
                </a-popover>
              </a-form-item>
              <a-form-item required label="保险份数" name="count">
                <a-select style={{ width: '210px' }} v-model:value={state.value.count}>
                  <a-select-option value={1}>1</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item required label="旅游路线" name="tour_route">
                <a-input style={{ width: '384px' }} v-model:value={state.value.tour_route} />
              </a-form-item>
              <a-form-item required label="旅游团编号" name="tour_group_no">
                <a-input style={{ width: '384px' }} v-model:value={state.value.tour_group_no} />
              </a-form-item>
              <div class={styles.tips}>
                <BellFilled class={styles['tips-icon']} />
                <span>本保险方案承保地域：限中国境内（不含香港、澳门、台湾地区）</span>
              </div>
            </a-form>
            <div class={styles['save-btn']} onClick={() => { saveConfirm() }}>确认修改并保存</div>
          </div>
        </div>
      </div>
    )
  }
})